<template>
  <!-- 方式1：使用组件 -->
  <page-container title="示例页面" icon="Crop" :loading="loading">
    <template #actions>
      <el-button type="primary">
        <el-icon><Plus /></el-icon>添加
      </el-button>
      <el-button>
        <el-icon><Refresh /></el-icon>刷新
      </el-button>
    
        </div>
      </template>
    
    <el-tabs v-model="activeTab" class="agri-tabs-wrapper">
      <el-tab-pane label="表格示例" name="table">
        <agri-table>
<div class="agri-table-wrapper">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="value" label="数值" />
            <el-table-column prop="date" label="日期" />
            <el-table-column label="操作" width="180" fixed="right">
              <template #default>
                <div class="agri-operations">
                  <el-button type="primary" size="small">查看</el-button>
                  <el-button type="success" size="small">编辑</el-button>
                  <el-button type="danger" size="small">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
</div>
        </agri-table>
      </el-tab-pane>
      
      <el-tab-pane label="卡片示例" name="card">
        <div style="padding: 20px;">
          <el-row :gutter="20">
            <el-col :span="8" v-for="i in 3" :key="i">
              <el-card class="agri-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <span>卡片标题 {{ i }}</span>
                    <el-button type="text">操作</el-button>
                  </div>
                </template>
                <div>
                  这是一个使用农业主题样式的卡片示例内容。<br>
                  您可以在这里放置任何内容。
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </page-container>
  
  <!-- 方式2：直接使用样式类 -->
  <!--
  <div class="agri-page-container">
    <div class="agri-page-header">
      <div class="agri-page-title">
        <el-icon><Crop /></el-icon>
        <span>示例页面</span>
      </div>
      <div class="agri-page-actions">
        <el-button type="primary">
          <el-icon><Plus /></el-icon>添加
        </el-button>
        <el-button>
          <el-icon><Refresh /></el-icon>刷新
        </el-button>
      </div>
    </div>
    
    <el-card class="agri-card">
      内容区域
    </el-card>
  </div>
  -->
</template>

<script setup>
import { ref } from 'vue';
import PageContainer from '../components/PageContainer.vue';
import AgriTable from '../components/AgriTable.vue';
import { Plus, Refresh, Crop } from '@element-plus/icons-vue';

const loading = ref(false);
const activeTab = ref('table');

// 模拟数据
const tableData = ref([
  { id: 1, name: '示例1', value: 100, date: '2023-06-01' },
  { id: 2, name: '示例2', value: 200, date: '2023-06-02' },
  { id: 3, name: '示例3', value: 300, date: '2023-06-03' },
]);
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 